<template>
	<el-dialog title="编辑" :visible.sync="dialogVisible" :before-close="handleClose" width="640px">
		<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="150px" class="demo-ruleForm">
			<el-form-item label="模板名称" prop="name">
				<el-input v-model="dataForm.name" placeholder="请输入模板名称"></el-input>
			</el-form-item>
			<el-form-item label="模板code" prop="code">
				<el-input v-model="dataForm.code" placeholder="请输入模板code"></el-input>
			</el-form-item>
			<el-form-item label="是否通知" prop="status">
				<el-radio v-model="dataForm.status" label="1">正常</el-radio>
				<el-radio v-model="dataForm.status" label="0">禁用</el-radio>
			</el-form-item>

			<el-form-item label="短信详情" prop="content">
				<el-input type="textarea" v-model="dataForm.content"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="small">取 消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	export default {
		data() {
			return {
				dialogVisible: false,
				dataForm: {
					id: '',
					content: '',
					name: '',
					code: '',
					status: '1',
					is_post: 1
				},
				rules: {
					name: [{
						required: true,
						message: '请输入模板名称',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入模板code',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			init() {
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields()
					if (this.dataForm.id) {
						this.getInfo()
					}
				})
			},
			getInfo() {
				this.$nextTick(() => {
					this.$loading()
				})
				this.$http.post(`/api/sms/edit`, {
					id: this.dataForm.id
				}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
					this.dataForm.status = String(this.dataForm.status)
				})
			},
			submitForm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post('/api/sms/edit', this
							.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dialogVisible = false
									this.handleClose()
									this.$emit('refreshDataList')
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			handleClose() {
				this.$refs.dataForm.resetFields();
				this.dialogVisible = false
			}
		}
	}
</script>
<style scoped lang="scss">
	.demo-ruleForm {
		padding-right: 50px;
	}
</style>